<template>
  <div class="remember">
    <van-nav-bar left-arrow title="忘记密码" @click-left="$router.go(-1)" fixed style="position: relative;" />
    <div class="contact-admin">请联系后台管理员</div>
    <!-- <div class="edit-content-style">
      <van-cell-group class="login-input-style">
        <van-field v-model="phoneNumber" type="tel" clearable placeholder="请输入手机号" />
        <van-field v-model="verificationCode" type="digit" clearable placeholder="请输入验证码">
          <van-button slot="button" size="small" color="#DC4630" plain round @click="getVerificationCode"
            :disabled="codeDisabled">{{ buttonText }}</van-button>
        </van-field>
        <van-field v-model="idNumber" maxlength="6" clearable placeholder="请输入身份证号后六位" />
        <van-field v-model="password" type="password" maxlength="12" clearable placeholder="请输入密码(6--12位)" />
        <van-field v-model="passwordAgain" type="password" maxlength="12" clearable placeholder="请再次输入密码(6--12位)" />
      </van-cell-group>
      <p class="edit-tip-style">密码由6-12位数字及字母组成，字母区分大小写</p>
      <van-button @click="affirm" size="large" type="primary" color="#DC4630" round :disabled="isDisabled">确定
      </van-button>
    </div> -->
  </div>
</template>

<script>
  import api from "@/controller/Interface.js";
  import util from "@/controller/Common/util.js";
  import md5 from "js-md5";
  import constant from "@/controller/constant.js";
  export default {
    name: "remember",
    data() {
      return {
        phoneNumber: "",
        verificationCode: "",
        idNumber: "",
        password: "",
        passwordAgain: "",
        buttonText: "获取验证码",
        codeDisabled: false,
        time: 60
      };
    },
    computed: {
      isDisabled() {
        return (
          this.phoneNumber === "" ||
          this.verificationCode === "" ||
          this.idNumber === "" ||
          this.password.length < 6 ||
          this.passwordAgain.length < 6
        );
      }
    },
    created() {},
    mounted() {},
    methods: {
      getVerificationCode() {
        if (!util.validatePhoneNum(this.phoneNumber)) {
          this.$toast("请输入合法手机号");
          return;
        }
        this.time = 60;
        this.timer();
        api
          .user_v1_msg_code(this.phoneNumber)
          .then(res => {
            if (res.code === "0") {
              this.$toast('验证码发送成功！');
            } else {
              if (res && res.msg) {
                this.$toast(res.msg);
              } else {
                this.$toast(constant.unusualMsg);
              }
              this.time = 0;
              this.buttonText = "获取验证码";
              this.codeDisabled = false;
            }
          })
          .catch(() => {
            this.$toast(constant.netErrMsg);
            this.time = 0;
            this.buttonText = "获取验证码";
            this.codeDisabled = false;
          });
      },
      //发送手机验证码倒计时
      timer() {
        if (this.time > 0) {
          this.codeDisabled = true;
          this.time--;
          this.buttonText = this.time + "秒";
          setTimeout(this.timer, 1000);
        } else {
          this.time = 0;
          this.buttonText = "获取验证码";
          this.codeDisabled = false;
        }
      },
      affirm() {
        if (!util.validatePhoneNum(this.phoneNumber)) {
          this.$toast("请输入合法手机号");
          return;
        }
        if (this.password !== this.passwordAgain) {
          this.$toast("两次输入的密码不一致，请重新输入");
          return;
        }
        if (!util.validateIdCardEnd6(this.idNumber)) {
          this.$toast("身份证号码后6位不合法");
          return;
        }
        const data = {
          code: this.verificationCode,
          idCardNO: this.idNumber,
          password: md5(this.password),
          phone: this.phoneNumber
        };
        api
          .security_v1_forgetPassword(data)
          .then(res => {
            if (res.code === "0") {
              this.$toast("密码重置成功!");
              this.$router.go(-1);
            } else {
              if (res && res.msg) {
                this.$toast(res.msg);
              } else {
                this.$toast(constant.unusualMsg);
              }
            }
          })
          .catch(() => {
            this.$toast(constant.netErrMsg);
          });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .remember {
    background: #ffffff;
    height: 100%;

    .contact-admin {
      padding: 20px 0;
      text-align: center;
      font-size: 16px;
    }
    // width: 100%;
    // display: flex;
    // flex-direction: column;
    // align-items: center;
    // background: #f5f7fa;

    .nav-bar-style {
      width: 100%;
      background: #f5f7fa;
    }

    .edit-content-style {
      width: 100%;
      height: 365px;
      border-radius: 10px;
      background: #ffffff;

      // padding: 0 15px;
      .edit-tip-style {
        font-size: 12px;
        color: #999;
        padding-left: 16px;
        margin-bottom: 48.5px;
      }
    }
  }
</style>